<template>
  <div class="warp">
    <el-progress :width="80" type="circle" :percentage="percentage"></el-progress>
    <div class="countdowm">{{timer}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 10 * 60,
      setTimer: null
    }
  },
  mounted () {
    this.setTimer = setInterval(() => {
      this.count--
      if (this.count == 0) {
        clearInterval(this.setTimer)
        this.setTimer = null
        // alert('考试时间到')
        setTimeout(() => {
          // this.$router.push("/Dashboard");
        }, 3000);
      }
    }, 1000)
  },
  computed: {
    percentage () {
      return (this.count / (10 * 60)).toFixed(2) * 100;
    },
    timer () {
      return ((Math.floor(this.count / 60) < 10 ? "0" + Math.floor(this.count / 60) : Math.floor(this.count / 60)) + " : " + (this.count % 60 < 10 ? "0" + (this.count % 60) : this.count % 60));
    },
  }
}
</script>

<style scoped>
.countdowm {
  position: absolute;
  right: 18px;
  font-size: 14px;
  top: 32px;
  background-color: white;
}
.warp {
  position: relative;
  display: inline-block;
}
</style>